<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        class popEvent {
            constructor(option) {
                /**
                 * 接收四个参数
                 * 1.对象的this
                 * 2.要监听的元素，不传则为对象的this
                 * 3.要监听的事件，默认监听点击事件
                 * 4.是否冒泡，默认冒泡
                 */
                this.eventObj = option.obj
                this.target = option.target || this.eventObj
                this.eventType = option.eventType || 'click'
                this.popup = option.popup || false
                this.bindEvent()
            }

            bindEvent() {
                let _this = this
                _this.target.addEventListener(_this.eventType, function (ev) {
                    let target = ev.target
                    let dataset, parent, num, b
                    console.log(target);
                    popup(target)
                    function popup(obj) {
                        if (obj === document) return false
                        dataset = obj.dataset
                        num = Object.keys(dataset).length
                        parent = obj.parentNode
                        if (num < 1) {
                            popup(parent)
                            num = 0
                        } else {
                            for (let b in dataset) {
                                if (_this.eventObj.__proto__[b]) {
                                    _this.eventObj.__proto__[b].call(_this.eventObj, { obj: obj, ev: ev, target: dataset[b], data: _this.eventObj })
                                }
                            }
                            _this.popup && popup(parent)
                        }
                    }
                })
            }
        }
    </script>

</head>

<body>
    <my-com />
    <script>
        class myCom extends HTMLElement {
            constructor() {
                super()
                this.obj = document.createElement('div')
                this.obj.innerHTML = `<div data-run='true'>run</div>`
                this.append(this.obj)
                new popEvent({ obj: this })
            }
            run(e) {
                console.log(e);
            }
        }

        window.customElements.define('my-com', myCom)

        const a = "<input data-run='true' n-run='awddaw' :click-run='1, 2, 3, ${this.state}'>run</input>"


        // let ac = JSON.stringify(`<input data-run='true' n-run='awddaw' :click='${{}}'>run</input>`)
        // window['a'](`${ac}`)
    </script>
</body>

</html>